<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="/static/js/jquery-3.6.3-min.js"></script>
  <script src="/static/js/slider.js"></script>
  <style>
    .slider {
      background-color: #fff;
      width: 278px;
      height: 285px;
      z-index: 999;
      box-sizing: border-box;
      padding: 9px;
      border-radius: 6px;
      box-shadow: 0 0 11px 0 #999999;
    }

    .slider .content {
      width: 100%;
      height: 159px;
      position: relative;
    }

    .bg-img-div {
      width: 100%;
      height: 100%;
      position: absolute;
      transform: translate(0px, 0px);
    }

    .slider-img-div {
      height: 100%;
      position: absolute;
      transform: translate(0px, 0px);
    }

    .bg-img-div img {
      width: 100%;
    }

    .slider-img-div img {
      height: 100%;
    }

    .slider .slider-move {
      height: 60px;
      width: 100%;
      margin: 11px 0;
      position: relative;
    }

    .slider .bottom {
      height: 19px;
      width: 100%;
    }

    .refresh-btn, .close-btn, .slider-move-track, .slider-move-btn {
      background: url(https://static.geetest.com/static/ant/sprite.1.2.4.png) no-repeat;
    }

    .refresh-btn, .close-btn {
      display: inline-block;
    }

    .slider-move .slider-move-track {
      line-height: 38px;
      font-size: 14px;
      text-align: center;
      white-space: nowrap;
      color: #88949d;
      -moz-user-select: none;
      -webkit-user-select: none;
      user-select: none;
    }

    .slider {
      user-select: none;
    }

    .slider-move .slider-move-btn {
      transform: translate(0px, 0px);
      background-position: -5px 11.79625%;
      position: absolute;
      top: -12px;
      left: 0;
      width: 66px;
      height: 66px;
    }

    .slider-move-btn:hover, .close-btn:hover, .refresh-btn:hover {
      cursor: pointer
    }

    .bottom .close-btn {
      width: 20px;
      height: 20px;
      background-position: 0 44.86874%;
    }

    .bottom .refresh-btn {
      width: 20px;
      height: 20px;
      background-position: 0 81.38425%;
    }
  </style>
</head>

<body>
<div class="slider">
  <div class="content">
    <div class="bg-img-div">
      <img id="bg-img" src="" alt/>
    </div>
    <div class="slider-img-div" id="slider-img-div">
      <img id="slider-img" src="" alt/>
    </div>
  </div>
  <div class="slider-move">
    <div class="slider-move-track">
      拖动滑块完成拼图
    </div>
    <div class="slider-move-btn" id="slider-move-btn"></div>
  </div>
  <div class="bottom">
    <div class="close-btn" id="slider-close-btn"></div>
    <div class="refresh-btn" id="slider-refresh-btn"></div>
  </div>
</div>
<script>
  let currentCaptchaId = null;
  $(function () {
    clearAllPreventDefault($(".slider"));
    refreshCaptcha();
  })

  $("#slider-move-btn").mousedown(down);
  $("#slider-move-btn").on("touchstart", down);

  $("#slider-close-btn").click(() => {

  });

  $("#slider-refresh-btn").click(() => {
    refreshCaptcha();
  });

  function valid(captchaConfig) {

    let data = {
      bgImageWidth: captchaConfig.bgImageWidth,
      bgImageHeight: captchaConfig.bgImageHeight,
      sliderImageWidth: captchaConfig.sliderImageWidth,
      sliderImageHeight: captchaConfig.sliderImageHeight,
      startSlidingTime: captchaConfig.startTime,
      entSlidingTime: captchaConfig.stopTime,
      trackList: captchaConfig.trackArr
    };
    console.log("valid", captchaConfig, data);
    $.ajax({
      type:"POST",
      url:"/captcha/check?id=" + currentCaptchaId,
      contentType: "application/json", //必须这样写
      dataType:"json",
      data:JSON.stringify(data),//schoolList是你要提交是json字符串
      success:function (res) {
        console.log(res);
        if (res.data) {
          alert("验证成功!!!");
        }
        refreshCaptcha();
      }

    })
  }

  function refreshCaptcha() {
    $.get("/captcha/get", function (data) {
      reset();
      currentCaptchaId = data.id;
      const bgImg = $("#bg-img");
      const sliderImg = $("#slider-img");
      bgImg.attr("src", data.backgroundImage);
      sliderImg.attr("src", data.sliderImage);
      initConfig(bgImg.width(), bgImg.height(), sliderImg.width(), sliderImg.height(), 206);
    })
  }

  function doDown() {
    $("#slider-move-btn").css("background-position", "-5px 31.0092%")
  }


  function doMove(currentCaptchaConfig) {
    const moveX = currentCaptchaConfig.moveX;
    $("#slider-move-btn").css("transform", "translate(" + moveX + "px, 0px)")
    $("#slider-img-div").css("transform", "translate(" + moveX + "px, 0px)")
  }
  function reset() {
    $("#slider-move-btn").css("background-position", "-5px 11.79625%")
    $("#slider-move-btn").css("transform", "translate(0px, 0px)")
    $("#slider-img-div").css("transform", "translate(0px, 0px)")
    currentCaptchaId = null;
  }
</script>
</body>
</html>
